<template>
    <view class="container">
        <u-navbar 
            leftText="流量统计"
            @leftClick="appFinish"
            leftIconColor="#1D2129"
            bgColor="transparent">
        </u-navbar>
		<div class="content_space">
			
		</div>
		<view class="content">
			<view class="total_traffic">
				总流量：{{ resourceStream.totalAmount }}
			</view>
			<view class="type_traffic">
				<view class="left_traffic">
					<view class="type_name">剩余流量：</view>
					<view class="type_value">{{ resourceStream.remainAmount }}</view>
				</view>
				<view class="right_traffic">
					<view class="type_name">已使用流量：</view>
					<view class="type_value">{{ resourceStream.useAmount }}</view>
				</view>
			</view>
			<view class="traffic_list">
				<u-tabs class="custom_tab" :list="tabs" lineColor="#295EFF"
				:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" 
				:current="currentTab" :itemStyle="itemStyle"  @change="changeTab">
				</u-tabs>
				<scroll-view @scrolltolower="scrolltolower" scroll-y scroll-with-animation class="content_scroll_view">
					<view class="item_list" v-for="(item, index) in trafficList" :key="index">
						<view class="item_top">
							<view class="item_time">{{ item.date }}</view>
							<view class="item_btn" @click="checkDetail(item.date)">
								<text>查看明细</text>
								<u-icon name="arrow-right" size="12" color="#295EFF"></u-icon>
							</view>
						</view>
						<view class="item_bottom">
							<text>直播流量 (GB)：{{ item.liveSize }}</text>
							<text>点播流量 (GB)：{{ item.videoSize }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
    </view>
</template>

<script>
export default {
	data () {
		return {
			tabs: [
			    { name: '全部' },
			    { name: '昨日' },
				{ name: '本周' },
				{ name: '本月' }
			],
			currentTab: 0,
			activeStyle: {
				color: '#464C5B',
				fontSize: '28rpx',
				fontWeight: 500,
			},
			inactiveStyle: {
				color: '#657180',
				fontSize: '28rpx',
				fontWeight: 400,
			},
			itemStyle: 'padding-left: 15px; padding-right: 15px; height: 34px;',
			resourceStream : {
				remainAmount: 0,
				totalAmount: 0,
				useAmount: 0,
			},
			trafficList: [],
			total: 0,
			params: {
				page: 1,
				pageSize: 10,
				startTime: null,
				endTime: null
			}
		}
	},
	onLoad() {
		// 获取流量情况
		this.getAllResourceRemain()
		this.getTrafficConsumeList()
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.trafficList = []
		this.getTrafficConsumeList()
	},
    methods: {
		appFinish() {
			this.$utils.appFinish(this)
		},
        goBack() {
            uni.navigateBack();
        },
		changeTab(item) {
			this.currentTab = item.index
			this.yesterdayUse(item.name)
		},
		yesterdayUse (time) {
		    // 获取昨天凌晨的时间戳
			const yesterdayMidnightTimestamp = Math.floor(new Date(new Date().setHours(0, 0, 0, 0) - 86400000).getTime() / 1000);
			// 获取今天24点的时间戳
			const todayMidnightTimestamp = Math.floor(new Date(new Date().setHours(23, 59, 59, 0) - 86400000).getTime() / 1000);
			// 当前时间戳
			const currentTime = Math.floor(new Date().getTime() / 1000)
			if (time == "昨日") {
			    this.params.startTime = yesterdayMidnightTimestamp
				this.params.endTime = todayMidnightTimestamp
			} else if (time == '本周') {
				this.params.startTime = this.getMondayTimestamp()
				this.params.endTime = currentTime
			} else if (time == '本月') {
				var data = new Date();
				data.setDate(1);
				data.setHours(0);
				data.setSeconds(0);
				data.setMinutes(0);
				this.params.startTime = Math.floor(data.getTime() / 1000)
				this.params.endTime = currentTime
			} else {
				this.params.startTime = ''
				this.params.endTime = ''
			}
			this.params.page = 1
			this.trafficList = []
		    this.getTrafficConsumeList()
		},
		getMondayTimestamp () {
		   const now = new Date();
		   const dayOfWeek = now.getDay() || 7; // 获取星期几，如果为0则设置为7
		   const delta = 1 - dayOfWeek; // 计算从当前日期到本周一的差距
		   const monday = new Date(now.setDate(now.getDate() + delta));
		   monday.setHours(0, 0, 0, 0); // 将时间设置为零点
		   return monday.getTime() / 1000; // 获取本周一零点的时间戳
		},
		checkDetail(date) {
			uni.navigateTo({
			    url: '/pages/trafficStatistics/detail?date=' + date
			});
		},
		// 获取流量情况
		async getAllResourceRemain() {
		  const { data } = await this.$request(this.$Api.getAllResourceRemain,{},'get')
		  const { resourceStream } = data.data
		  this.resourceStream = {
			remainAmount: this.$utils.formatSize(resourceStream.remainAmount),
			totalAmount: this.$utils.formatSize(resourceStream.totalAmount),
			useAmount: this.$utils.formatSize(resourceStream.useAmount),
		  };
		},
		// 滚动到底部加载更多
		scrolltolower(e) {
			if (this.trafficList.length < this.total) {
				this.params.page++
				this.getTrafficConsumeList()
			} else {
				uni.showToast({
					title: '已到底',
					icon: 'none'
				})
			}
		},
		async getTrafficConsumeList() {
			const { data } = await this.$request(this.$Api.getFlowConsumeList, this.params, "get")
			const list = data.data.list.map(item => {
				 item.liveSize=(item.liveSize / (1000 * 1000 * 1000)).toFixed(2)
				 item.videoSize=(item.videoSize / (1000 * 1000 * 1000)).toFixed(2)
				 return item
			})
			this.trafficList = this.trafficList.concat(list)
			this.total = data.data.total
			uni.stopPullDownRefresh()
		},
    }
}
</script>

<style lang="scss" scoped>
.container {
   position: relative;
   height: 100vh;
   background: url('@/static/image/my_set_bg.png') no-repeat center center;
   background-size: cover;
   ::v-deep .u-navbar__content__left__text{
   	font-weight: 500;
   	font-size: 32rpx;
   }
   .content{
	    display: flex;
		flex-direction: column;
		
		padding: 0 32rpx;
		padding-top: 96rpx;
		height: calc(100vh - 96rpx);
		box-sizing: border-box;
		.total_traffic{
		   height: 34rpx;
		   line-height: 34rpx;
		   padding: 16rpx 0;
		   font-weight: 400;
		   font-size: 24rpx;
		   color: #295EFF;
		}
		.type_traffic{
			display: flex;
			justify-content: space-between;
			.left_traffic,
			.right_traffic{
				width: 332rpx;
				height: 160rpx;
				margin-bottom: 20rpx;
				padding: 36rpx 24rpx 24rpx 24rpx;
				box-sizing: border-box;
				background-size: cover !important;
				.type_name{
					font-size: 20rpx;
					color: #464C5B;
				}
				.type_value{
					font-weight: 600;
					font-size: 40rpx;
					color: #464C5B;
					text-align: center;
					margin-top: 16rpx;
				}
			}
			.left_traffic{
				background: url('@/static/image/left_bg.png') no-repeat center center;
			}
			.right_traffic{
				background: url('@/static/image/right_bg.png') no-repeat center center;
			}
		}
		.traffic_list{
			flex: 1;
			background-color: #FFFFFF;
			border-radius: 12rpx 12rpx 0 0;
			.custom_tab{
				margin-top: 10rpx;
				::v-deep .u-tabs__wrapper__nav{
					border-bottom: 1px solid #E3E8EE;
					.u-tabs__wrapper__nav__line{
						bottom: 0;
					}
				}
			}
			.content_scroll_view{
				height: calc(100vh - 420rpx);
				box-sizing: border-box;
				padding: 28rpx 0;			
				.item_list {
					padding: 24rpx;
					background: #F7FAFF;
					border-radius: 14rpx;
					margin:0 24rpx 24rpx 24rpx;
					.item_top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
						.item_time{
							flex: 1;
							font-weight: 600;
							font-size: 28rpx;
							color: #464C5B;
						}
						.item_btn{
							display: flex;
							height: 40rpx;
							line-height: 40rpx;
							width: 126rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #295EFF;
							text{
								margin-right: 6rpx;
							}
						}
					}
					.item_bottom{
						font-weight: 400;
						font-size: 24rpx;
						color: #657180;
						text{
							margin-right: 40rpx;
						}
					}
				}
		
			}
		}
   }
}
</style>

